<template>
  <div>
    <div v-show="(!isEdit&&!isDetail&&!isMember)" class="page-index">
      <div class="page-left">
        <ClassifyTreeSilder @nodeClick="nodeClick" ref="treeSilder" />
      </div>
      <div class="page-right">
        <div class="table-search">
          <el-form inline>
            <el-form-item v-model="queryParams.currentTerm" label="班子届次">
              <el-input size="mini" placeholder="请输入（例如：第一届）" />
            </el-form-item>
            <el-form-item label="选举方式">
              <el-select v-model="queryParams.electionMethod" size="mini" placeholder="请选择">
                <el-option
                  v-for="(item,index) in typeList"
                  :key="index"
                  :label="item"
                  :value="index"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="search">搜索</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table-box">
          <el-table
            :data="tableData"
            height="100%"
          >
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column prop="currentTerm" label="班子届次" align="center" width="180" />
            <el-table-column prop="electionMethod" label="选举方式" align="center" width="180">
              <template slot-scope="scope">
                {{ typeList[scope.row.electionMethod] }}
              </template>
            </el-table-column>
            <el-table-column prop="termBeginEnd" label="任期时间" align="center" min-width="250" />
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openMember(scope.row)"
                >成员</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="openDetail(scope.row)"
                >查看</el-button>
                <el-button
                  v-if="queryParams.pageNo===1&&scope.$index===0"
                  type="text"
                  size="mini"
                  style="color:#F56C6C;"
                  @click="openAdd(scope.row)"
                >换届</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getData"
        />
      </div>
    </div>
    <detailPage v-show="isDetail" ref="detailPage" @detailToEdit="detailToEdit" @goback="detailGoback" />
    <addOrEdit v-show="isEdit" ref="addOrEdit" @goback="editGoback" />
    <memberPage v-show="isMember" ref="memberPage" @goback="memberGoback" />
  </div>
</template>
<script>
import ClassifyTreeSilder from '@/components/classifyTree/classifyTreeSilder.vue'
import detailPage from './components/detail.vue'
import addOrEdit from './components/addOrEdit.vue'
import memberPage from './components/member.vue'
import { queryByCondition, queryById } from '@/api/partyMemberManagement/teamBuilding'
export default {
  components: {
    ClassifyTreeSilder,
    detailPage,
    addOrEdit,
    memberPage
  },
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        partyOrgId: null,
        currentTerm: null,
        electionMethod: null
      },
      partyOrgName: '',
      total: 0,
      tableData: [],
      isDetail: false,
      isEdit: false,
      isMember: false,
      typeList: ['不记名投票', '记名投票，线下投票']
    }
  },
  methods: {
    updataTree (id) {
      this.$refs.treeSilder.updateKeyData(id)
    },
    getData () {
      queryByCondition(this.queryParams).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data.total || 0
      })
    },
    nodeClick (data, node, dom) {
      this.queryParams.partyOrgId = data.id
      this.partyOrgName = data.fullNamePartyOrg
      // this.openAdd()
      this.search()
    },
    search () {
      this.queryParams.pageNo = 1
      this.getData()
    },
    openAdd () {
      this.isEdit = true
      const obj = {
        partyOrgId: this.queryParams.partyOrgId,
        partyOrgName: this.partyOrgName
      }
      this.$refs.addOrEdit.init(obj)
    },
    openEdit (row) {
      this.isEdit = true
      this.$refs.addOrEdit.init(row)
    },
    openDetail (row) {
      queryById({ id: row.id }).then((res) => {
        this.isDetail = true
        this.$refs.detailPage.init(res?.data || {})
      })
    },
    openMember (row) {
      this.isMember = true
      this.$refs.memberPage.init(row?.id)
    },
    editGoback (isQuery) {
      this.isEdit = false
      if (isQuery) {
        this.getData()
      }
    },
    detailGoback () {
      this.isDetail = false
    },
    memberGoback () {
      this.isMember = false
    },
    detailToEdit (row) {
      this.isDetail = false
      this.openEdit(row)
    },
    reset () {
      this.queryParams.currentTerm = null
      this.queryParams.electionMethod = null
      this.search()
    }
  }
}
</script>
<style scoped lang="scss">
.page-index {
  display: flex;
  padding-top: 24px;
  .page-left {
    height: calc(100vh - 130px);
    overflow-y: auto;
    width: 300px;
  }
  .page-right {
    flex: 1;
    .table-search {
      display: flex;
      justify-content: space-between;
      padding-left:16px;
    }
    .table-box {
      height: calc(100vh - 230px);
    }
  }
}
</style>
